<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
</body>
<script type="module">
    import { setCookie, getCookie } from "../js/cookie.js";


    // cookie的注意事项:
    // 1. cookie要依赖于服务器环境   -> live server
    // 2. cookie不能跨网站  
    // 3. cookie不能跨浏览器 
    // 4. cookie是以键值对形式存在的字符串 (key val都是字符串),如果存储其他类型,会隐式转化为字符串

    // 注意:
    // 如果要在cookie中存储数组和对象, 在存储之前需要通过JSON.stringify()将数组和对象转化为JSON字符串,再存储; 取值时,先取值,


    // 5. cookie存储中文时,某些浏览器可能会乱码  => 中文编码和解码 

    // 在存储之前,需要通过encodeURIComponent()对中文进行编码,再存储
    // 取值时,将获取的内容(编码后的内容),通过decodeURIComponent()进行解码




    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];


    setBtn.onclick = function () {
        // setCookie("user", "a123123", 7 * 24 * 60 * 60);
        // setCookie("pwd", "123123");
        // setCookie("phone", "17386141517", 1 * 24 * 60 * 60);
        // setCookie("email", "a123123@163.com", 31 * 24 * 60 * 60);

        // var arr = [1, 2, 3];
        // var obj = { a: 1, b: 2 };

        // setCookie("num", 100);
        // setCookie("str", "hello");
        // setCookie("bool", true);

        // setCookie("arr", arr);
        // setCookie("obj", obj);


        // 存储数组和对象
        // var arr = [1, 2, 3];
        // var obj = { a: 1, b: 2 };

        // setCookie("arr", JSON.stringify(arr));
        // setCookie("obj", JSON.stringify(obj));


        // 存中文
        setCookie("user", "张三")

    }

    getBtn.onclick = function () {
        console.log(document.cookie);

        // console.log(getCookie("user"));
        // console.log(getCookie("pwd"));
        // console.log(getCookie("phone"));
        // console.log(getCookie("email"));
        // console.log(getCookie("num"));
        // console.log(getCookie("str"));
        // console.log(getCookie("bool"));
        // console.log(getCookie("arr"));
        // console.log(getCookie("obj"));

        // var arrStr = getCookie("arr");
        // var objStr = getCookie("obj");

        // var arr = JSON.parse(arrStr);
        // var obj = JSON.parse(objStr);
        // console.log(arr);
        // console.log(obj);


        console.log(getCookie("user"));

    }



</script>

</html>